<template>
    <v-card width="100%"
            class="pa-0 select-wrapper">
        <v-banner color="white"
                  style="height: 100px"
                  sticky>
            <span class="ma-2">
                <v-btn color="primary" @click="startGenerate">开始生成</v-btn>
            </span>
        </v-banner>

        <v-row class="pl-8 select-area">
            <div class="circular-wrapper d-flex align-center justify-center" >
                <v-progress-circular
                        :size="70"
                        :width="7"
                        color="purple"
                        indeterminate
                        style="z-index: 1000"
                        v-show="playCircular"
                ></v-progress-circular>
            </div>

            <v-col class="d-flex" cols="12" sm="6"
                   style="height:95%;overflow-y: auto">
                <v-card width="100%">
                    <TemplateSelectPage @template-selected="templateSelected">
                    </TemplateSelectPage>
                </v-card>
            </v-col>
            <v-col class="d-flex" cols="12" sm="6"
                   style="height:95%;overflow-y: auto">
                <v-card  width="100%">
                    <TableSelectPage @table-selected="tableSelected">
                    </TableSelectPage>
                </v-card>
            </v-col>
        </v-row>


    </v-card>
</template>

<script>
import TemplateSelectPage from './TemplateSelectPage';
import TableSelectPage from './TableSelectPage';
import OnceData from "../generator/onece-data";
import TemplateEngine from "../generator/template-engine";

export default {
    name: "Generator",
    data: () => ({
        templates:[],
        tables:[],
        dbConfig: null,
        dbPwd: '',
        playCircular: false
    }),
    components: {
        TemplateSelectPage,TableSelectPage
    },
    methods:{
        templateSelected(templates){
            this.templates = templates
        },
        tableSelected(tables,dbConfig,dbPwd){
            this.tables = tables
            this.dbConfig = dbConfig
            this.dbPwd = dbPwd
        },
        startGenerate(){
            /*if(this.selected.length === 0){
                this.confirmSelect()
                return
            }*/
            this.playCircular = true
            for (let tableIndex in this.tables) {
                for (let templateIndex in this.templates) {
                    new OnceData(
                        this.templates[templateIndex].id,
                        this.dbConfig,
                        this.dbPwd,
                        this.tables[tableIndex]
                    ).then((onceData) =>{
                        console.log(onceData);
                        let templateEngine = new TemplateEngine(onceData)
                        templateEngine.render()
                    })
                }
            }
            this.playCircular = false
            this.$dialog.confirm({
                text: '代码生成完毕，请去查看吧！',
                actions:{true: '知道了'}
            })

        }
    }
}
</script>

<style scoped>
    .select-wrapper {
        height: calc(100vh - 60px);
        position: relative;
    }
    .select-area {
        height: calc(100vh - 165px);
    }
    .circular-wrapper {
        position: absolute;
        height: calc(100vh - 165px);
        width: 100%;
    }
</style>